<template>
    <view class="container">
        <view class="form-group">
            <view class="form-title">实名认证</view>
            <view class="form-item">
                <text class="label">真实姓名</text>
                <input 
                    type="text"
                    v-model="formData.realName"
                    placeholder="请输入真实姓名"
                    maxlength="20"
                />
            </view>
            <view class="form-item">
                <text class="label">身份证号</text>
                <input 
                    type="idcard"
                    v-model="formData.idCard"
                    placeholder="请输入身份证号码"
                    maxlength="18"
                />
            </view>

            <!-- 身份证上传 -->
            <view class="upload-section">
                <view class="upload-title">上传身份证照片</view>
                <view class="upload-tips">请上传清晰的身份证正反面照片</view>
                <view class="upload-list">
                    <view class="upload-item">
                        <image 
                            v-if="formData.frontImage" 
                            :src="formData.frontImage"
                            mode="aspectFill"
                            @tap="previewImage('front')"
                        ></image>
                        <view 
                            v-else 
                            class="upload-btn"
                            @tap="chooseImage('front')"
                        >
                            <image src="/static/images/upload.png"></image>
                            <text>上传正面照</text>
                        </view>
                    </view>
                    <view class="upload-item">
                        <image 
                            v-if="formData.backImage" 
                            :src="formData.backImage"
                            mode="aspectFill"
                            @tap="previewImage('back')"
                        ></image>
                        <view 
                            v-else 
                            class="upload-btn"
                            @tap="chooseImage('back')"
                        >
                            <image src="/static/images/upload.png"></image>
                            <text>上传反面照</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="tips">
            <view class="tip-item">* 请确保上传的证件为本人证件</view>
            <view class="tip-item">* 证件信息仅用于实名认证，我们会严格保护您的隐私</view>
        </view>

        <button 
            class="submit-btn"
            :disabled="!isValid"
            :loading="submitting"
            @tap="handleSubmit"
        >
            提交认证
        </button>
    </view>
</template>

<script>
import { verifyIdentity, uploadIdCard } from '@/api/user'

export default {
    data() {
        return {
            formData: {
                realName: '',
                idCard: '',
                frontImage: '',
                backImage: ''
            },
            submitting: false
        }
    },
    computed: {
        isValid() {
            return this.formData.realName && 
                   this.formData.idCard && 
                   this.formData.frontImage && 
                   this.formData.backImage
        }
    },
    methods: {
        // 选择图片
        async chooseImage(type) {
            try {
                const res = await uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed']
                })
                
                const tempFile = res.tempFilePaths[0]
                // 上传图片
                const uploadRes = await uploadIdCard(tempFile, type)
                this.formData[`${type}Image`] = uploadRes.url
            } catch (error) {
                if (error.errMsg !== 'chooseImage:fail cancel') {
                    uni.showToast({
                        title: '上传失败',
                        icon: 'none'
                    })
                }
            }
        },
        
        // 预览图片
        previewImage(type) {
            const current = this.formData[`${type}Image`]
            const urls = [
                this.formData.frontImage,
                this.formData.backImage
            ].filter(Boolean)
            
            uni.previewImage({
                current,
                urls
            })
        },
        
        // 提交认证
        async handleSubmit() {
            if (this.submitting) return
            
            try {
                this.submitting = true
                await verifyIdentity(this.formData)
                
                uni.showToast({
                    title: '提交成功',
                    icon: 'success'
                })
                
                // 更新全局用户信息
                const app = getApp()
                app.globalData.userInfo.isVerified = true
                app.globalData.userInfo.realName = this.formData.realName
                app.globalData.userInfo.idCard = this.formData.idCard
                
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            } catch (error) {
                uni.showToast({
                    title: error.message || '认证失败',
                    icon: 'none'
                })
            } finally {
                this.submitting = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    
    .form-group {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        
        .form-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 30rpx;
        }
        
        .form-item {
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            border-bottom: 1rpx solid #eee;
            
            .label {
                width: 140rpx;
                font-size: 28rpx;
                color: #666;
            }
            
            input {
                flex: 1;
                font-size: 28rpx;
            }
        }
    }
    
    .upload-section {
        margin-top: 40rpx;
        
        .upload-title {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
        }
        
        .upload-tips {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 20rpx;
        }
        
        .upload-list {
            display: flex;
            gap: 20rpx;
            
            .upload-item {
                flex: 1;
                height: 360rpx;
                border-radius: 12rpx;
                overflow: hidden;
                
                image {
                    width: 100%;
                    height: 100%;
                }
                
                .upload-btn {
                    width: 100%;
                    height: 100%;
                    background: #f5f5f5;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    
                    image {
                        width: 48rpx;
                        height: 48rpx;
                        margin-bottom: 10rpx;
                    }
                    
                    text {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
        }
    }
    
    .tips {
        padding: 30rpx 0;
        
        .tip-item {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 10rpx;
        }
    }
    
    .submit-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background: #07c160;
        color: #fff;
        font-size: 32rpx;
        border-radius: 44rpx;
        
        &[disabled] {
            background: #ccc;
        }
    }
}
</style> 